<template>
  <Modal v-model="show" v-bind:title="modalTitle" @on-cancel="cancel" :closable="false">
    <Form
      ref="customForm"
      :model="customInfo"
      :label-width="95"
      label-position="right"
      :rules="customRules"
    >
      <FormItem label="用户类型" prop="user_type" ref="userType">
        <Select v-model="customInfo.user_type" :disabled="edit_flag" @on-change="changeUserType">
          <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </FormItem>
      <FormItem label="时间段" prop="time_range" v-show="dynamic" ref="timeSpan">
        <TimePicker
          v-model="customInfo.validate_time"
          type="timerange"
          placeholder
          format="HH:mm"
          style="width: 100%"
        ></TimePicker>
      </FormItem>
      <FormItem label="背景色" prop="bgcolor" ref="bgColor">
        <Row>
          <ColorPicker v-model="customInfo.bgcolor"/>
        </Row>
      </FormItem>
      <FormItem label="称谓" prop ref v-show="customInfo.user_type=='4'">
        <Input v-model.trim="customInfo.name" placeholder :maxlength="20"/>
      </FormItem>
      <FormItem label="主标题" prop="title" ref="subTitle">
        <Input v-model.trim="customInfo.title" placeholder :maxlength="20"/>
      </FormItem>
      <FormItem label="副标题" prop="body" ref="subBody">
        <Input type="textarea" v-model.trim="customInfo.body" placeholder :maxlength="40"/>
      </FormItem>
      <FormItem label="语音模式" prop="voice_type" ref="voiceType">
        <Select v-model="customInfo.voice_type" @on-change="changeVoiceType">
          <Option value="0">关闭</Option>
          <Option value="1">自定义</Option>
          <Option value="2">默认</Option>
        </Select>
      </FormItem>
      <FormItem label="语音文本" prop="voice_text" ref="voiceText">
        <Input
          ref="voiceTextInput"
          v-model.trim="customInfo.voice_text"
          :maxlength="20"
          :placeholder="voiceText"
          :disabled="customInfo.voice_type!=1"
        />
      </FormItem>
      <FormItem label="停留时间(秒)" prop="stay" ref="stay">
        <InputNumber v-model.trim="customInfo.stay" :min="0" :max="600"/>
      </FormItem>
      <p class="margin-left-10">
        * 支持在主标题、副标题、语音文本中输入变量来获取指定信息:
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;${name}：获取姓名
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;${department}：获取部门
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;${company}：获取公司
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;${id}：获取工号
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;${time}：获取当前时间
      </p>
    </Form>
    <div slot="footer">
      <Button type="text" size="large" @click="show = false">取消</Button>
      <Button type="primary" @click="handleSubmit">提交</Button>
    </div>
  </Modal>
</template>

<script>
import Tool from "@/libs/util";
import ME from "../../../controllers/custom";
import {
  getHistoryData,
  getAvatar,
  getTypeList,
  getDownloadUrl
} from "../../../controllers/record";
import DateUtils from "../../../../node_modules/iview/src/utils/date";

export default {
  name: "add-custom",
  props: {
    update_callback: {
      type: Function,
      default() {}
    }
  },
  created() {
    this.initTypeList();
  },
  computed: {
    modalTitle() {
      if (this.type == "static") {
        return "静态自定义配置";
      } else if (this.type == "dynamic") {
        return "动态自定义配置";
      }
    }
  },
  data() {
    return {
      type: "",
      show: false,
      edit_flag: false,
      dynamic: false,
      typeList: [],
      voiceText: "",
      customInfo: {
        _id: "",
        user_type: "",
        custom_type: "",
        name: "",
        title: "",
        body: "",
        bgcolor: "#000000",
        validate_time: ["0000", "2359"],
        start_time: "",
        stop_time: "",
        stay: 3,
        voice_type: "0",
        voice_text: ""
      },
      customRules: {
        user_type: [
          {
            required: true,
            message: "用户类型不能为空",
            trigger: "blur"
          }
        ],
        bgcolor: [
          {
            required: true,
            message: "颜色不能为空",
            trigger: "blur"
          }
        ],
        stay: [
          {
            required: true,
            message: "停留时间不能为空",
            trigger: "blur",
            type: "number",
            transform(value) {
              return Number(value);
            },
            validator(rule, value, callback) {
              if (value < 0 || value > 600) {
                callback(new Error("请输入[0, 600]内的整数"));
              } else {
                callback();
              }
            }
          }
        ]
      }
    };
  },
  methods: {
    changeUserType(value) {
      let list = ["#1a9bfc", "#1d953e", "#1d953e", "#fd8852", "#000000"];
      if (list[value] && list.indexOf(this.customInfo.bgcolor) >= 0) {
        this.customInfo.bgcolor = list[value];
      }
    },
    changeVoiceType(value) {
      if (value == "2") {
        this.customInfo.voice_text = "";
        this.voiceText = "您好，/姓名";
      } else {
        this.voiceText = "";
      }
      if (value == "0") {
        this.customInfo.voice_text = "";
      }
    },
    initTypeList() {
      getTypeList("1").then(json => {
        this.typeList = json.data;
      });
    },

    handleSubmit() {
      this.$refs["customForm"].validate().then(validate => {
        if (validate) {
          this.submit();
        } else {
          this.$Message.error("请检查表单");
        }
      });
    },
    submit() {
      let config = {
        user_type: this.customInfo.user_type,
        custom_type: this.customInfo.custom_type,
        bgcolor: this.customInfo.bgcolor,
        name: this.customInfo.name,
        title: this.customInfo.title,
        body: this.customInfo.body,
        stay: this.customInfo.stay,
        voice_type: this.customInfo.voice_type,
        voice_text: this.customInfo.voice_text
      };

      if (config.custom_type == "1") {
        config.start_time = DateUtils.format(
          this.customInfo.validate_time[0],
          "HHmm"
        );
        config.end_time = DateUtils.format(
          this.customInfo.validate_time[1],
          "HHmm"
        );
      }

      if (this.edit_flag) {
        config.custom_id = this.customInfo._id;
        ME.update(config).then(res => {
          this.show = false;
          this.$Message.success("更新成功");
          this.update_callback();
        });
      } else {
        ME.add(config).then(res => {
          this.show = false;
          this.$Message.success("添加成功");
          this.update_callback();
        });
      }
    },
    cancel() {},
    showAsUpdate(custom) {
      this.show = true;
      this.type = custom.custom_type == 0 ? "static" : "dynamic";
      this.dynamic = this.type == "dynamic";
      this.customInfo.user_type = "" + custom.user_type;
      this.customInfo.custom_type = custom.custom_type;
      this.customInfo._id = custom._id;
      this.customInfo.title = custom.title;
      this.customInfo.body = custom.body;
      this.customInfo.bgcolor = custom.bgcolor;
      this.customInfo.name = custom.name;
      this.customInfo.start_time = custom.start_time;
      this.customInfo.end_time = custom.end_time;
      this.customInfo.validate_time = custom.validate_time;
      this.customInfo.stay = custom.stay;
      this.customInfo.voice_type = custom.voice_type;
      this.customInfo.voice_text = custom.voice_text;
      this.changeVoiceType(this.customInfo.voice_type);
      this.edit_flag = true;
    },
    showAsAdd(type) {
      this.show = true;
      this.type = type;
      this.customInfo.user_type = "";
      this.customInfo.custom_type = type == "dynamic" ? 1 : 0;
      this.customInfo._id = "";
      this.customInfo.title = "";
      this.customInfo.body = "";
      this.customInfo.bgcolor = "#000000";
      this.customInfo.name = "";
      this.customInfo.start_time = "";
      this.customInfo.end_time = "";
      this.customInfo.validate_time = ["0000", "2359"];
      this.dynamic = this.type == "dynamic";
      this.customInfo.custom_type = this.type == "static" ? "0" : "1";
      this.edit_flag = false;
      this.customInfo.stay = "3";
      this.customInfo.voice_type = "0";
      this.voiceText = "";
      this.customInfo.voice_text = "";
    }
  }
};
</script>

<style scoped>
.config {
}

.config input {
  width: 100%;
}

.config div {
  width: 100%;
}
</style>